* {margin: 0; padding: 0; box-sizing: border-box;}

body {overflow-x: hidden; background-color: #11395d;}
html {font-size: calc(100vw/10.8);}
img {display: block;}

.flex {display: -webkit-flex; display: flex;}
.flex-item {flex: 1;}
.center {text-align: center; justify-content: center;}

.pop-bg {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background-color: rgba(0,0,0,.5); display: none; justify-content: center; align-items: center;}
.pop-bg.show,.pop-bg-share.show {display: -webkit-flex; display: flex;}
.pop-bg-share {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; background-color: rgba(0,0,0,.5); display: none; justify-content: center; align-items: center;}

.page {position: relative; min-height: 100vh;}
.page.index {background-image: url("../images/bg.jpg"); background-size: 100%; background-repeat: no-repeat;}

.page .tree {position: absolute; left: 0; top: 0; width: 5.68rem;}
.page .station {position: absolute; width: 100%; bottom: 0;}
.page .flower {position: absolute; width: 100%; left: 0; top: 6.8rem;}
.page .moon-box {position: absolute; width: 10.8rem; height: 12.65rem; top: .5rem; align-items: center;}
.page .moon-box > img.moon {width: 7.85rem; height: 7.86rem;}
.page .moon-box > img.moon-cake {width: 100%; position: absolute; left: 0; top: 0; opacity: 0;}
.page .lantern {position: absolute; width: 100%; top: 1.68rem;}


